<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="主页demo/js/jquery-3.6.0.min.js"></script>
		<link rel="stylesheet"  href="css/base.css"/>
		<style>
			.imgdiv{
					width:300px ;
					height: 500px;
					position: relative;
					overflow: hidden;
			}
			.imgdiv>.navtop{
				width: 100%;
				height: 15%;
				position: absolute;
				background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0));
				top: -75px;
				transition: all 0.5s ease-in-out;
			}
			.imgdiv>.contain{
				width: 100%;
				height: 100%;
			}
			.imgdiv>.contain>img{
				width: 100%;
				height: 100%;
			}
			.imgdiv>.footer{
				width: 100%;
				height: 15%;
				position: absolute;
				background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6));
				transition: all 0.5s ease-in-out;
				bottom: -75px;
			}
			.imgdiv>.left{
				width: 20%;
				height: 100%;
				position: absolute;
				background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.6));
				right: -60px;
				top: 0px;
				transition: all 0.5s ease-in-out;
			}
		</style>
	</head>
	<body>
		
		<div class="imgdiv">
			<div class="navtop">顶部</div>
			<div class="contain">
				<img src="img/webp.jpg" />
			</div>
			<div class="footer">底部</div>
			<div class="left">左侧</div>
		</div>
		
		<script>
			$(function(){
			
				$(".imgdiv").hover(function(){				
					$(this).children().eq(0).css({					
						"top":"0px",
					})
				
				$(this).children().eq(2).css({
							"bottom":"0px",
						})	
				$(this).children().eq(3).css({
							"right":"0px",
						})	
				},function(){
					
						$(this).children().eq(0).css({					
							"top":"-75px",
						})
					
					$(this).children().eq(2).css({
								"bottom":"-75px",
							})	
					$(this).children().eq(3).css({
								"right":"-60px",
							})	
				})
			})
		</script>
	</body>
</html>
